Add collapsible sections to all configurator panels - #433
Merged
Conversation
…ni palettes + fade gradient fix - Make Brand color sources, Text contrast, and Shade/tint curve sections collapsible (start expanded), matching the existing LumLocker/Status/Gradients pattern - Add Mini palettes dynamic preview in Shade/tint curve: shows all 5 brand colors × all 11 palette steps, with shared light/dark toggle linked to the existing curve preview toggle - Fade gradients (fade-right/left/up/down) no longer show direction-change buttons since their direction is their identity; brand gradients keep the angle/direction controls Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016G1SLZmmZy4d71nYpotZbX
|
Warning Review limit reached
More reviews will be available in 47 minutes and 43 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (15)
📝 WalkthroughWalkthroughAll eleven configurator panel components ( ChangesCollapsible panel sections across configurator
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
PR Summary by QodoAdd collapsible sections across configurator panels (with color curve mini palettes) Description
Diagram
High-Level Assessment
Files changed (11)
|
Every section header in Borders, Effects, Layout, Macros, Misc, Motion, Shadows, Spacing, Typography, and WCAG panels now toggles open/closed with a chevron button. Sections default to open; previously collapsed-by-default sections (e.g. Fine-tune, Bento, Prose) keep their existing defaults. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016G1SLZmmZy4d71nYpotZbX
jackgranatowski
force-pushed
the
claude/color-controls-panel-m1j9di
branch
from
June 27, 2026 21:10
288dc9b to
3572c3a
Compare
Code Review by Qodo
Context used✅ Compliance rules (platform):
6 rules 1.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@configurator/src/components/panels/BordersPanel.svelte`:
- Around line 97-103: The accordion toggle buttons in BordersPanel.svelte only
update the visual chevron and do not expose their open/closed state to assistive
tech. Update the border section toggle buttons in the panel to include
aria-expanded bound to the corresponding boolean state and add aria-controls
pointing at the collapsible content region, using the existing
showBorderColor-style state variables and button handlers as the pattern. Apply
the same accessibility pattern consistently to the other section toggles in this
panel so screen readers can identify the expanded/collapsed state.
In `@configurator/src/components/panels/EffectsPanel.svelte`:
- Around line 210-219: The scrollbar track color row in EffectsPanel.svelte is
using an invalid fallback for <input type="color"> by passing "transparent" for
the --sf-scrollbar-track token. Update the row config and the value handling in
the each block so the color input always receives a valid opaque color string,
and keep any transparency/reset behavior separate from the picker value. Use the
existing row.token, row.val, and row.default setup to locate the change.
In `@configurator/src/components/panels/MacrosPanel.svelte`:
- Around line 81-87: The section toggle buttons in MacrosPanel.svelte do not
expose their open/closed state to assistive tech. Update the toggle buttons that
flip showFlow, showPalette, showPresets, showCustomStyles, and showImportText to
include aria-expanded bound to the corresponding boolean, and add aria-controls
pointing to the related collapsible section element so screen readers can
announce the state.
In `@configurator/src/components/panels/MiscPanel.svelte`:
- Around line 65-71: Add accessible expand/collapse state to the collapsible
header buttons in MiscPanel.svelte. Update each toggle button (the touch target
and the other section headers in the same pattern) to expose its open/closed
state with aria-expanded and connect it to the controlled content using a
matching aria-controls/id relationship. Use the existing toggle state variables
and section wrapper elements so assistive tech can track which panel is
expanded.
In `@configurator/src/components/panels/MotionPanel.svelte`:
- Around line 122-128: The section toggle buttons in MotionPanel.svelte do not
expose their expanded/collapsed state to assistive tech. Update each toggle
button that flips showGlobalScale and the other section state flags to include
aria-expanded tied to the same boolean, and add aria-controls pointing at the
corresponding collapsible content container. Make sure the hidden motion
controls in the related sections are associated with the correct toggle so
screen readers announce state changes properly.
- Around line 154-159: The Dark/light switch speed control in MotionPanel.svelte
is still using the default scale-derived value instead of the actual theme
transition token. Update the SliderRow binding to use themeTransition so it
reflects --sf-theme-transition-duration consistently, and keep the
onChange/onReset handlers tied to that same token to avoid the jump when the
override is already present.
In `@configurator/src/components/panels/ShadowsPanel.svelte`:
- Around line 44-50: The shadow-section toggle buttons in ShadowsPanel.svelte
only expose state via the ▲/▼ glyph; add an aria-expanded binding to each toggle
button so assistive tech can read the expanded/collapsed state. Update the
button elements associated with showShadowAppearance and the other shadow
section state toggles in the same component to reflect their boolean state
through aria-expanded, keeping the visible label/icon behavior unchanged.
In `@configurator/src/components/panels/SpacingPanel.svelte`:
- Around line 71-77: The collapsible section headers in SpacingPanel.svelte
currently toggle visually but do not expose their state to assistive tech.
Update each header button (including the showLayoutGap toggle and the other
section toggles referenced in the panel) to include aria-expanded bound to the
corresponding open state and aria-controls pointing to the matching collapsible
content container. Use the existing toggle state variables in
SpacingPanel.svelte to keep the button semantics synchronized with the
open/closed sections.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 89d4a61d-635b-414b-8f0d-e068bfbfb6a0
📒 Files selected for processing (11)
configurator/src/components/panels/BordersPanel.svelteconfigurator/src/components/panels/ColorsPanel.svelteconfigurator/src/components/panels/EffectsPanel.svelteconfigurator/src/components/panels/LayoutPanel.svelteconfigurator/src/components/panels/MacrosPanel.svelteconfigurator/src/components/panels/MiscPanel.svelteconfigurator/src/components/panels/MotionPanel.svelteconfigurator/src/components/panels/ShadowsPanel.svelteconfigurator/src/components/panels/SpacingPanel.svelteconfigurator/src/components/panels/TypographyPanel.svelteconfigurator/src/components/panels/WcagPanel.svelte
Comment on lines
+65
to
+71
| <button | ||
| onclick={() => { showTouchTarget = !showTouchTarget; }} | ||
| class="w-full flex items-center justify-between cursor-pointer" | ||
| > | ||
| <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Touch target</div> | ||
| <span class="text-[10px] text-slate-500">{showTouchTarget ? "▲" : "▼"}</span> | ||
| </button> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Add accessible state to the collapsible headers.
The new toggle buttons only expose the state visually via ▲/▼. Please add aria-expanded and wire each button to its controlled section so assistive tech can follow the expand/collapse state.
Also applies to: 97-103, 126-132, 160-166, 216-222, 255-261, 298-304
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@configurator/src/components/panels/MiscPanel.svelte` around lines 65 - 71,
Add accessible expand/collapse state to the collapsible header buttons in
MiscPanel.svelte. Update each toggle button (the touch target and the other
section headers in the same pattern) to expose its open/closed state with
aria-expanded and connect it to the controlled content using a matching
aria-controls/id relationship. Use the existing toggle state variables and
section wrapper elements so assistive tech can track which panel is expanded.
Comment on lines
+71
to
+77
| <button | ||
| onclick={() => { showLayoutGap = !showLayoutGap; }} | ||
| class="w-full flex items-center justify-between cursor-pointer" | ||
| > | ||
| <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Layout gap</div> | ||
| <span class="text-[10px] text-slate-500">{showLayoutGap ? "▲" : "▼"}</span> | ||
| </button> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Make the spacing-section headers announce their open/closed state.
The buttons work visually, but without aria-expanded/aria-controls the new collapsible sections are opaque to screen readers.
Also applies to: 110-116, 140-146, 199-205
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@configurator/src/components/panels/SpacingPanel.svelte` around lines 71 - 77,
The collapsible section headers in SpacingPanel.svelte currently toggle visually
but do not expose their state to assistive tech. Update each header button
(including the showLayoutGap toggle and the other section toggles referenced in
the panel) to include aria-expanded bound to the corresponding open state and
aria-controls pointing to the matching collapsible content container. Use the
existing toggle state variables in SpacingPanel.svelte to keep the button
semantics synchronized with the open/closed sections.
- Add .claude/hooks/session-start.sh: runs npm install + npm run prepare on every remote session start, wiring .githooks so the commit-msg hook runs commitlint before each commit — prevents recurring lint failures - Update .gitignore: stop ignoring all of .claude/; ignore only lock/cache files so settings.json and hooks/ are tracked in the repo - Add aria-expanded to all 67 collapsible section toggle buttons across all panels so screen readers can announce the open/closed state - Fix MotionPanel theme transition slider: bind to themeTransition derived value instead of Math.round(300 * scale) (wrong when token is overridden) - Fix EffectsPanel scrollbar track color input: use #000000 as picker fallback instead of "transparent" (browsers reject transparent in color inputs) - Fix WcagPanel $effect: early-exit when pair checker is collapsed to skip the lightness-search loop; move showPairChecker declaration before the effect that references it Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016G1SLZmmZy4d71nYpotZbX
Duplicate aria-expanded attribute on the "More layout primitives" toggle caused svelte-check to fail with attribute_duplicate error, breaking CI. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016G1SLZmmZy4d71nYpotZbX
This was referenced Jun 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add expand/collapse functionality to all major sections across the configurator panels, allowing users to hide less-frequently-used settings and reduce visual clutter.
Changes
Implementation Details
$statereactive variable for each section{#if showSection}conditional blockstrue) for backward compatibilityhttps://claude.ai/code/session_016G1SLZmmZy4d71nYpotZbX
Summary by CodeRabbit